<template>
	<view class="orderList-main">
		<view class="top-wrap">
			<NavigationBar title="我的订单" />
			<view class="tabs-wrap b-b">
				<view 
				:class="['tabs-item',{'tabs-active':tIndex==tabsIndex}]" 
				v-for="(tItem,tIndex) in tabsList" 
				:key="tIndex" 
				@click="tabsClick(tIndex)"
				>{{tItem}}</view>
			</view>
		</view>
		<view class="scroll-wrap">
			<mescroll-body ref="mescrollRef" top="88px" :topbar="true" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view class="goods-list">
					<view class="goods-item" v-for="(rItem,rIndex) in dataList" :key="rIndex"  @click="jumpDetailsAction">
						<view class="item-top b-b">
							<text class="order-num">订单号：1234567890</text>
							<text class="order-status">待支付</text>
						</view>
						<view class="item-center" v-for="(item,index) in 2" :key="index">
							<image class="avatar" src="https://zjjk-1255331212.cos.ap-beijing.myqcloud.com/ih/real/a7ae5cc302554953a7a86ff5bc93f901/20200723163129_aec21267-8bb7-52f5-2bc9-91f21e69d959.jpg" mode=""></image>
							<view class="goods-info">
								<view class="goods-info-row">
									<text class="name txt-overflow-s">小施专用脑残片{{rIndex}}</text>
									<text class="price">¥ 66.89</text>
								</view>
								<view class="goods-info-row">
									<text class="desc txt-overflow-m">凡是名字叫小施的都可以吃这款脑残片，而且效果比起其他人吃会更好</text>
									<text class="number">x1</text>
								</view>
							</view>
						</view>
						<view class="total">
							<text class="total-text">共2件 实付:</text>
							<text class="total-price">¥ 133.78</text>
						</view>
						<view class="item-bottom b-t">
							<view class="left">
								2021-04-28 10:12
							</view>
							<view class="right">
								<view class="buttom btn" @click.stop="cancelAction(rIndex)">
									<text class="text">取消订单</text>
								</view>
								<view class="primary-buttom btn" @click.stop="paymentAction(rIndex)">
									<text class="text">立即支付</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script lang="ts">
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabsIndex: 0,
				tabsList: ['全部','待付款','待发货','待收货','待评价'],
				dataList: [],
				downOption: {
					auto: false
				},
			};
		},
		onLoad(option:any) {
			const _this:any = this
			_this.tabsIndex = option.tabsIndex
		},
		methods: {
			tabsClick(index:any) {
				const _this: any = this
				_this.tabsIndex = index
				_this.mescroll.resetUpScroll();
			},
			upCallback(page:any) {
				const _this: any = this
				if(page.num == 1) _this.dataList = []
				_this.getListAction()
			},
			getListAction() {
				const _this: any = this
				setTimeout(()=>{
					let curPageData = new Array(24).fill(2)
					let curPageLen = curPageData.length
					_this.dataList = _this.dataList.concat(curPageData)
					console.log(_this.tabsIndex,'上拉-------',_this.dataList)
					_this.mescroll.endByPage(curPageLen, 3); 
				},2000)
			},
			jumpDetailsAction() {
				const _this: any = this
				_this.$util.jumpPage('/pages/orderDetails/orderDetails')
			},
			cancelAction() {
				console.log('====cancel====')
			},
			paymentAction() {
				console.log('====payment====')
			}
		}
	}
</script>

<style lang="scss">
	@import './orderList.scss'
</style>
